<template>
  <el-row>
    <!-- 左侧容器和组件 -->
    <el-col :span="4">
      <h3>容器</h3>
      <draggable
        class="left-panel"
        :list="leftContainerList"
        :group="{ name: 'containerGroup', pull: 'clone', put: false }"
        :clone="cloneContainer"
        :sort="false"
      >
        <el-card
          v-for="(container, index) in leftContainerList"
          :key="`container-${index}`"
          class="draggable-item small-item"
          shadow="hover"
        >
          <el-row align="middle">
            <el-col :span="6">
              <i class="el-icon-box"></i>
            </el-col>
            <el-col :span="18">
              <p>{{ container.name }}</p>
            </el-col>
          </el-row>
        </el-card>
      </draggable>

      <h3>组件</h3>
      <draggable
        class="left-panel"
        :list="leftComponentList"
        :group="{ name: 'componentGroup', pull: 'clone', put: false }"
        :sort="false"
      >
        <el-card
          v-for="(component, index) in leftComponentList"
          :key="`component-${index}`"
          class="draggable-item small-item"
          shadow="hover"
        >
          <el-row align="middle">
            <el-col :span="6">
              <i class="el-icon-s-operation"></i>
            </el-col>
            <el-col :span="18">
              <p>{{ component.name }}</p>
            </el-col>
          </el-row>
        </el-card>
      </draggable>
    </el-col>

    <!-- 右侧工作区 -->
    <el-col :span="20">
      <h3>右侧工作区</h3>
      <div class="workspace">
        <draggable
          class="right-panel"
          v-model="rightContainerList"
          :group="{ name: 'rightContainerGroup', pull: true, put: ['containerGroup'] }"
          :sort="true"
          @end="handleRightDragEnd"
          @move="checkMove"
        >
          <div
            v-for="(container, index) in rightContainerList"
            :key="`right-container-${index}`"
            class="draggable-container"
            :style="containerStyle(container)" 
          @mousedown="startDrag(container, $event)"
          >
          <el-card shadow="hover">
            <div v-if="!container.components.length" class="add-icon-container">
              <i class="el-icon-plus add-icon"></i>
            </div>

            <draggable
              class="components"
              v-model="container.components"
              :group="{ name: 'rightComponentGroup', put: ['componentGroup'] }"
              :sort="true"
              @end="handleInnerDragEnd(index)"
            >
              <el-card
                v-for="(component, cIndex) in container.components"
                :key="`component-${index}-${cIndex}`"
                class="draggable-item"
                shadow="hover"
              >
                {{ component.name }}
              </el-card>
            </draggable>
          </el-card>
      </div>
      </draggable>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: { draggable },
  data() {
    return {
      leftContainerList: [
        { name: "容器1" },
        { name: "容器2" },
      ],
      leftComponentList: [
        { name: "按钮" },
        { name: "文本" },
      ],
      rightContainerList: [], // 右侧的容器列表
      draggingContainer: null, // 当前正在拖拽的容器
    };
  },
  methods: {
    cloneContainer(original) {
      return {
        name: original.name,
        components: [],
        x: 0, // 默认 x 轴坐标
        y: 0, // 默认 y 轴坐标
      };
    },
    handleRightDragEnd(evt) {
      console.log('右侧拖拽结束:', evt.newIndex, evt.oldIndex);
      console.log('新排序的容器列表:', this.rightContainerList);
    },
    handleInnerDragEnd(containerIndex) {
      console.log('组件拖拽完成', containerIndex);
    },
    checkMove(evt) {
      console.log('拖拽正在移动:', evt.draggedContext, evt.relatedContext);
    },
    // 启动拖拽，捕捉鼠标事件
    startDrag(container, event) {
      this.draggingContainer = container;
      const { clientX, clientY } = event;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
      this.draggingContainer.initialMouseX = clientX;
      this.draggingContainer.initialMouseY = clientY;
    },
    // 处理拖拽过程
    onDrag(event) {
      if (!this.draggingContainer) return;
      const { clientX, clientY } = event;
      const dx = clientX - this.draggingContainer.initialMouseX;
      const dy = clientY - this.draggingContainer.initialMouseY;
      this.draggingContainer.x += dx;
      this.draggingContainer.y += dy;
      this.draggingContainer.initialMouseX = clientX;
      this.draggingContainer.initialMouseY = clientY;
    },
    // 停止拖拽，移除事件监听
    stopDrag() {
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
      this.draggingContainer = null;
    },
    // 返回容器的 CSS 样式，允许自由移动
    containerStyle(container) {
      return {
        position: 'absolute',
        left: `${container.x}px`,
        top: `${container.y}px`,
      };
    },
  },
};
</script>

<style scoped>
.left-panel {
  margin-bottom: 20px;
}

.right-panel {
  padding: 20px;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  min-height: 300px;
}

.workspace {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.draggable-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  cursor: move;
}

.add-icon-container {
  text-align: center;
  padding: 40px;
  background-color: #f0f4f7;
  border: 2px dashed #c0c4cc;
  border-radius: 4px;
}

.add-icon {
  font-size: 36px;
  color: #409eff;
  transition: color 0.3s;
}

.add-icon-container:hover .add-icon {
  color: #66b1ff;
}

.components {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.draggable-item {
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: #e8f4ff;
  border-radius: 4px;
  border: 1px solid #c6e2ff;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
  .component {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .container {
    width: 30%;
  }
  .component {
    width: 45%;
  }
}
</style>
